<template>
  <div>
    <ul>
      <li v-for="msg in messages">
        <router-link :to="`/home/messages/msgDetails?id=${msg.id}`">{{msg.title}}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
  var data= [
    {id:1,title:"message01"},
    {id:2,title:"message02"},
    {id:3,title:"message03"},
    {id:4,title:"message04"},
    {id:5,title:"message05"}
  ]
  export default {
    name: "messages",
    data(){
      return{
        messages: []
      }
    },
    mounted() {
      setTimeout(()=>{
        this.messages = data
      },2000)
    }
  }
</script>

<style scoped>

</style>
